<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { api } from '@/api/api';
import type { StudyTreeItem } from '@/views/Square/LearningSquare/SkillTree/home/types/StudyTreeItem';
import { message } from 'ant-design-vue';
import VueFlowChart from '@/views/Square/LearningSquare/SkillTree/details/Components/VueFlow.vue';

const route = useRoute();
const skillTreeId = route.params.id;
const skillTreeDetails = ref<StudyTreeItem>();
const isCollected = ref<boolean>();

const fetchSkillTreeDetails = async () => {
  if (!skillTreeId)
    return;
  const res = await api.get('/java/teacher/study_tree_json/detail', {
    params: { id: skillTreeId },
  });
  skillTreeDetails.value = res.data;
};

const fetchIsCollected = async () => {
  if (!skillTreeId)
    return;

  const res = await api.get('/java/teacher/study_tree_json/list_favorite', {
    params: { treeId: skillTreeId },
  });
  isCollected.value = res.data.some((item: any) => item.id === skillTreeId);
};

const onCollectButtonClick = () => {
  if (!skillTreeId)
    return;

  if (isCollected.value) {
    // 取消收藏
    api.post('/java/teacher/study_tree_json/remove_favorite_tree', { treeId: skillTreeId })
      .then(() => {
        isCollected.value = false;
        message.info('已取消收藏');
      });
  }
  else {
    // 添加收藏
    api.post('/java/teacher/study_tree_json/add_favorite_tree', { treeId: skillTreeId })
      .then(() => {
        isCollected.value = true;
        message.info('已收藏');
      });
  }
};

onMounted(() => {
  fetchSkillTreeDetails();
  fetchIsCollected();
});
</script>

<template>
  <a-layout class="details-layout mt-2">
    <a-breadcrumb style="font-weight: bold; margin: 0rem 1rem;" class="text-3xl">
      <a-breadcrumb-item>
        <router-link to="/user/learningNew/skill-tree" style="height: 100%;">
          学习广场
        </router-link>
      </a-breadcrumb-item>

      <a-breadcrumb-item>
        <router-link to="/user/learningNew/skill-tree" style="height: 100%;">
          技能树
        </router-link>
      </a-breadcrumb-item>

      <a-breadcrumb-item class="flex items-center relative">
        详情
        <img
          src="@/assets/title_star.svg"
          alt="详情"
          class="w-6 h-6 absolute -right-6"
        >
      </a-breadcrumb-item>
    </a-breadcrumb>

    <div class="details-header">
      <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
        <p style="font-size: 1.5rem; font-weight: bold; margin: 1rem;">
          {{ skillTreeDetails?.name }}
        </p>

        <a-button type="primary" shape="round" size="large" style="margin-right: 1rem;" @click="onCollectButtonClick">
          {{ isCollected ? '已收藏' : '收藏' }}
        </a-button>
      </div>

      <p style="font-size: 1rem; margin: 0rem 1rem 1rem 1rem;">
        {{ skillTreeDetails?.description }}
      </p>
    </div>

    <a-layout style="margin: 0rem 1rem 1rem 1rem; background-color: transparent; border-radius: 0.5rem; flex: 1; overflow: auto;">
      <VueFlowChart v-if="skillTreeDetails" :study-tree-details="skillTreeDetails" :tree-name="skillTreeDetails.name" />
      <a-empty v-else description="暂无数据" />
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.details-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent;
}

.details-header {
  background-color: transparent;
  margin: 0rem;
}
</style>
